<template>
    <div class="account">
        <div class="user-wrap">
            <img src="@/assets/personal/company-default.png" alt="" class="icon">
            <div style="flex:1;width:0">
                <div class="name">{{userInfo.mobile}}</div>
                <div class="flex">
                    <el-tag size="small">{{userInfo.tenant_level_name}}</el-tag>
                    <a class="link" @click="showUpgrade">升级可享更多特权</a>
                </div>
            </div>
            <template v-if="userInfo.is_admin">
                <el-button type="primary" v-if="!isEdit" @click="isEdit = true">编辑信息</el-button>
                <el-button v-if="isEdit" @click="isEdit = false">取消</el-button>
                <el-button type="primary" v-if="isEdit" @click="save(formRef)">保存信息</el-button>

            </template>
        </div>
        <el-form ref="formRef"
                 :model="form"
                 label-position="top"
                 :label-width="120">
            <div class="title">基本信息</div>
            <el-row :gutter="20">
                <el-col :span="24">
                    <el-form-item label="公司名称" porp="tenant_name">
                        <el-input placeholder="请输入公司名称" :disabled="!isEdit" v-model="form.tenant_name"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="公司地址">
                        <div class="flex">
                            <el-select v-model="form.province_id" @change="provinceChange" :disabled="!isEdit">
                                <el-option v-for="(item, index) in area.province" :key="index" :label="item.strict_name" :value="item.id"></el-option>
                            </el-select>
                            <el-select v-model="form.city_id" :disabled="!isEdit" @change="cityChange">
                                <el-option v-for="(item, index) in area.city" :key="index" :label="item.strict_name" :value="item.id"></el-option>

                            </el-select>
                            <el-select v-model="form.district_id" :disabled="!isEdit">
                                <el-option v-for="(item, index) in area.district" :key="index" :label="item.strict_name" :value="item.id"></el-option>
                            </el-select>
                        </div>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="公司详细地址" prop="address_detail">
                        <el-input placeholder="请输入公司详细地址" :disabled="!isEdit" v-model="form.address_detail"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <div class="title">联系人信息</div>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="姓名" prop="contact_name">
                        <el-input v-model="form.contact_name" :disabled="!isEdit"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="手机号码" prop="contact_tel">
                        <el-input v-model="form.contact_tel" :disabled="true"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>
<script lang="ts" setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'

import { getProvinces, getCities, getDistrictes,saveAccount } from 'services/system'

import systemStore from '@/store/modules/system'

const $systemStore = systemStore()

const formRef = ref<FormInstance>()

interface Account {
    tenant_name: string,
    contact_name: string,
    contact_tel: string,
    city_id: number | undefined,
    province_id: number | undefined,
    district_id: number | undefined,
    is_admin: boolean,
    mobile: string,
    address_detail:string
}

const form = ref<Account>({
    tenant_name: '',
    contact_name:'',
    contact_tel:'',
    city_id: undefined,
    province_id:undefined,
    district_id:undefined,
    is_admin:false,
    mobile:'',
    address_detail:''
})

const isEdit = ref(false)

const area = reactive({
    province:[],
    city:[],
    district:[]
})

const getProvinceList = () => {
    getProvinces().then(res => {
        area.province = res
    })
}

const provinceChange = (val:number) => {
    getCityList(val)
    form.value.city_id = undefined
    form.value.district_id = undefined
}

const getCityList = (province_id:number) => {
    getCities({province_id}).then(res => {
        area.city = res
    })
}

const cityChange = (val:number) => {
    getDistrictList(val)
    form.value.district_id = undefined
}

const getDistrictList = (city_id:number) => {
    getDistrictes({city_id}).then(res => {
        area.district = res
    })
}

const save = async (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    await formEl.validate((valid, fields) => {
        if (valid) {
            saveAccount({
                tenant_name:form.value.tenant_name,
                contact_name: form.value.contact_name,
                province_id: form.value.province_id,
                city_id:form.value.city_id,
                district_id:form.value.district_id,
                address_detail:form.value.address_detail
            }).then(res => {
                ElMessage.success('操作成功')

            })
        } else {
            console.log('error submit', fields)
        }
    })
}

const showUpgrade = () => {
    $systemStore.setLevelDialog(true)
}

const userInfo = computed(() => {
    let userInfo = $systemStore.userInfo
    form.value = {
        tenant_name: userInfo.tenant_name,
        city_id: userInfo.city_id,
        province_id: userInfo.province_id,
        district_id: userInfo.district_id,
        is_admin: userInfo.is_admin,
        mobile: userInfo.mobile,
        address_detail: userInfo.address_detail,
        contact_tel:userInfo.contact_tel,
        contact_name:userInfo.contact_name
    }

    getCityList(userInfo.province_id)
    getDistrictList(userInfo.city_id)
    return userInfo
})

onMounted(() => {
    getProvinceList()
})

</script>
<style lang="scss">
.account{
    .flex{
        display: flex;

        .el-select + .el-select{
            margin-left: 10px;
        }
    }
}
</style>